<template>
    <div class="container playListWrap">
        <h2 class="flex justify-between mt20 mb10">列表 
            <div><span @click="changeType('new')">最新</span> | <span @click="changeType('hot')">最热</span></div>
        </h2>
        <PlayListItem 
            :offset='offset' :order='order'
            v-loading="loading"
            element-loading-text="拼命加载中"
        ></PlayListItem>
        <Pagination @changeCurrent='changeCurrent'></Pagination>
    </div>
</template>

<script>
import request from '../network/request'
import PlayListItem from './content/PlayListItem'
import Pagination from './Pagination'
import elementLoading from './../mixin/elementLoading'
export default {
    data() {
        return {
            playlist:null,
            limit:50,
            offset:0,//翻页 偏移量
            order:'hot',
        }
    },
    mixins:[elementLoading],
    components:{
        PlayListItem,
        Pagination//分页组件
    },
    mounted(){
    },
    methods:{
        changeType(order){//改变类型 最新 | 最热
            this.order=order
        },
        changeCurrent(offset){
            console.log(offset,999);
            this.offset=offset
        }
    }
}
</script>

<style lang='scss' scoped>
    .playListWrap{
        h2{
            div{
                font-size: 12px;
                font-weight: normal;
            }
        }
        
        &>ul{
            /* 使用伪元素辅助左对齐 */
            &::after {
                content: '';
                flex: 0.93;    /* 或者flex: 1 */
            }
            li{
                width: 160px;
                height: 220px;
                margin-bottom: 10px;
                h3{
                    font-weight: normal;
                }
                img{
                    width: 100%;
                }
            }
        }
    }
</style>